<template>
  <div>
    <h2>Hello</h2>
    <p>x: {{ x }}</p>
    <p>y: {{ y }}</p>
    <p>count: {{ count }}</p>

    <button @click="url = 'http://localhost:3000/todos'">Todos</button>
    <button @click="url = 'http://localhost:3000/books'">Books</button>

    <div v-if="error">请求出错了， {{ error.message }}</div>
    <div v-else-if="data">
      <p>请求成功：数据如下：</p>
      <pre>
        {{ data }}
      </pre>
    </div>
    <div v-else>请求加载中...</div>
  </div>
</template>

<script>
import { useMouse } from '@/hooks/mouse'
import { useFetch } from '@/hooks/fetch'
import { useCounter } from '@/hooks/counter'
import { ref } from 'vue'

export default {
  setup() {
    const { x, y } = useMouse()
    
    const url = ref('http://localhost:3000/todos')
    const { data, error } = useFetch(url)

    const { count } = useCounter()

    return {
      x,
      y,
      url,
      data,
      error,
      count
    }
  }
}
</script>
